<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<link rel="stylesheet" href="<%=basePath%>backstage/css/layui.css" media="all" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>common/css/myStyle.css" media="all">
<script type="text/javascript" src="<%=basePath%>common/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>common/js/scroll.js"></script>
<script type="text/javascript" src="<%=basePath%>backstage/js/echarts.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>common/frame/layui/layui.js"></script>

<style>
    .gailan_detail{
        width: 22%;
        cursor:pointer;
        margin-top: 20px;
        margin-bottom: 20px;
        height:46%;
    }
    .gailan_detail_num{
        text-align: center;
        margin-left: 0px;
    }
    .addLi li{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .name{
        padding-left: 25px;
        width: 20%;
        display: inline-block;
    }
    .phone{
        width: 25%;
        display: inline-block;
    }
    .type{
        margin-left: 50px;
        width: 12%;
        display: inline-block;
    }
    .time{
        width: 20%;
        display: inline-block;
    }

    .layui-badge-dot{
        width: 30px;
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        float: right;
        margin-right: 10px;
        margin-top: -25px;
    }
    body{
        padding: 1px !important;
        height: 99%;
    }
    .dc_index_body{
        margin: 1px !important;
    }
</style>
<div class="dc_index_body" style="overflow:auto;height: 99%;">
   <%-- <div class="dc_index_gailan" style="height: 35%;">
        <div class="gailan_title">数据统计概览（实时）</div>
        <div class="gailan_content" >
            <div class="gailan_detail my_href">
                <a data-href="<%=basePath%>user/userPage">
                    <input type="hidden" class="title" value="用户列表">
                    <input type="hidden" class="icon" value="<i class='iconfont'>&#xe606;</i>">
                    <div class="gailan_detail_title">用户注册累计总数（人）</div>
                    <div class="gailan_detail_num" id="userCount">${requestScope.userCount }</div>
                </a>
            </div>
            <div class="gailan_detail">
                    <div class="gailan_detail_title">拼手气兑换奖品累计（个）
                            <span style="display: none" title="待发货${requestScope.hand_count}个" class="layui-badge-dot" id="hand_count" >${requestScope.hand_count}</span>
                    </div>
                    <div class="gailan_detail_num" id="handCount">${requestScope.handCount }</div>
            </div>
            <div class="gailan_detail">
                    <div class="gailan_detail_title">财神送宝奖品领取总数（个）
                            <span style="display: none" title="待发货${requestScope.room_count}个" class="layui-badge-dot" id="room_count" >${requestScope.room_count}</span>
                    </div>
                    <div class="gailan_detail_num" id="roomCount">${requestScope.roomCount }</div>
            </div>
            <div class="gailan_detail">
                <div class="gailan_detail_title">情缘册奖品领取总数（个）
                    <span style="display: none;" title="待发货${requestScope.book_count}个" class="layui-badge-dot"  id="book_count" >${requestScope.book_count}</span>
                </div>
                <div class="gailan_detail_num" id="bookCount">${requestScope.bookCount }</div>
            </div>

        </div>
    </div>
    <div class="dc_index_tongji" style="height: 60.6%;">
        <div class="gailan_title">订单金额统计</div>
        <div id="bing" style="width:100%;height:86%;margin-top:25px;" >

        </div>
    </div>
    <div class="best_news_gonggao" style="height: 60.6%;">
        <div class="gailan_title">最新注册用户<span style="color:chocolate">（显示20人）</span></div>
            <div style="margin-bottom: -20px;color:#8A8A8A;">
                <span class="type">头像</span>
                <span class="name">用户名</span>
                <span class="phone">手机号</span>
                <span class="time">注册日期</span>
            </div>
        <div class="xunhuan" style="height: 83%;">
            <ul class="addLi">
                <c:forEach items="${requestScope.user}" var="u">
                    <li>
                        <span class="type">
                            <c:if test="${empty u.pic}">
                                <img style="cursor: pointer; height: 40px;width: 40px; border-radius:40px;" src="<%=basePath%>backstage/images/user.jpg">
                            </c:if>
                            <c:if test="${not empty u.pic}">
                                <img style="cursor: pointer; height: 40px;width: 40px; border-radius:40px;" src="${u.pic}">
                            </c:if>
                        </span>
                        <span class="name">${u.name}</span>
                        <span class="phone">${u.phone}</span>
                        <span class="time">${u.time}</span>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>--%>

</div>

<script type="text/javascript">

    layui.config({
        base: "<%=basePath%>common/larrylib/",
        version: '201708031'
    }).use(['jquery', 'form', 'upload'], function () {
        var $ = layui.jquery, form = layui.form;

        $(".my_href").on("click", function () {
            var a = $(this).find(".title").val();
            var i = $(this).find("a").data("href");
            var t = $(this).find(".icon").val();
            var r = {title: a, href: i, icon: t};
            top.larryTab.tabAdd(r);
        });

     /*   $(".xunhuan").myScroll({
            speed: 50, //数值越大，速度越慢
            rowHeight: 50 //li的高度
        });

        function show_hide(){
            var hand = $("#hand_count").html();
            var book = $("#book_count").html();
            var room = $("#room_count").html();
            if(parseInt(hand)>0){
                $("#hand_count").show();
            }else{
                $("#hand_count").hide();
            }
            if(parseInt(book)>0){
                $("#book_count").show();
            }else{
                $("#book_count").hide();
            }
            if(parseInt(room)>0){
                $("#room_count").show();
            }else{
                $("#room_count").hide();
            }
        }
        show_hide();
        setInterval(function () {
            $.ajax({
                url: '<%=basePath%>total/prizeCount',
                type: 'post',
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.state == 200) {
                        $("#userCount").html(data.data.userCount);
                        $("#handCount").html(data.data.handCount);
                        $("#bookCount").html(data.data.bookCount);
                        $("#roomCount").html(data.data.roomCount);
                        $("#hand_count").html(data.data.hand_count);
                        $("#book_count").html(data.data.book_count);
                        $("#room_count").html(data.data.room_count);
                    }
                }
            });
            show_hide();
        }, 30000);

        setInterval(function () {
            $.ajax({
                url: '<%=basePath%>total/bannerPeople',
                type: 'post',
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.state == 200) {
                        var html = "";
                        for (var i=0; i<data.data.length;i++){
                           var pic =  data.data[i].pic;
                           if(pic.length<=0){
                               pic = "<%=basePath%>backstage/images/user.jpg"
                           }
                            html += '<li>'+
                                '<span class="type">'+
                                '<img style="cursor: pointer; height: 40px;width: 40px; border-radius:40px;" src="'+pic+'">'+
                                '</span>'+
                                '<span class="name">'+data.data[i].name+'</span>'+
                                '<span class="phone">'+data.data[i].phone+'</span>'+
                                '<span class="time">'+data.data[i].time+'</span>'+
                                '</li>'
                        }
                        $(".addLi").html(html);
                    }
                }
            });
        }, 180000);


        function indexTotal() {
            $.ajax({
                url: '<%=basePath%>total/indexTotal',
                type: 'post',
                async: false,
                data: {days: 6},
                dataType: "json",
                success: function (data) {
                    if (data.state == 200) {
                        var myecharts = echarts.init(document.getElementById("bing"));
                        var colors = ['#FD832E', '#8B6BEA', '#F0404B', '#32D4AD'];
                        option = {
                            color: colors,
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            grid: {
                                right: '10%'
                            },
                            toolbox: {
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            legend: {
                                data: ['拼手气','情缘册', '财神送宝','余额充值']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    data: data.data.time
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '拼手气',
                                    min: 0,
                                    max: data.data.max,
                                    position: 'left',
                                    offset: 60,
                                    axisLine: {
                                        lineStyle: {
                                            color: colors[2]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '情缘册',
                                    min: 0,
                                    max: data.data.max,
                                    position: 'left',
                                    offset: 5,
                                    axisLine: {
                                        lineStyle: {
                                            color: colors[0]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '财神送宝',
                                    min: 0,
                                    max: data.data.max,
                                    position: 'right',
                                    offset: 5,
                                    axisLine: {
                                        lineStyle: {
                                            color: colors[1]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },

                                {
                                    type: 'value',
                                    name: '余额充值',
                                    min: 0,
                                    max: data.data.max,
                                    position: 'right',
                                    offset: 60,
                                    axisLine: {
                                        lineStyle: {
                                            color: colors[3]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '拼手气',
                                    type: 'bar',
                                    data: data.data.total3
                                },
                                {
                                    name: '情缘册',
                                    type: 'bar',
                                    yAxisIndex: 1,
                                    data: data.data.total1
                                },
                                {
                                    name: '财神送宝',
                                    type: 'bar',
                                    data: data.data.total2
                                },
                                {
                                    name: '余额充值',
                                    type: 'bar',
                                    data: data.data.total4
                                }
                            ]
                        };
                        myecharts.setOption(option);

                    } else {
                        top.layer.msg(data.message, {icon: 5});
                    }
                }, error: function () {
                    top.layer.msg("系统数据处理异常！", {icon: 2});

                }
            });
        }

        indexTotal();//进行首页统计

        setInterval(function () {
            indexTotal();//进行首页统计
        }, 60000);
*/
    });
</script>